<template>
  <div class = "">
    <!--  //头部-->
    <el-form
        :inline="true"
        :model="selectByForm"
        class="advanced-form"
        label-position="right"
    >
      <el-row :gutter="20" class="form-row">
        <!-- 第一行 -->
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="form-col">
          <el-form-item label="姓名" class="form-item">
            <el-input
                v-model="selectByForm.ownerName"
                placeholder="请输入真实姓名"
                clearable
                class="form-input"
                @focus="handleFocus($event)"
                @blur="handleBlur($event)"
            />
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="form-col">
          <el-form-item label="资产" class="form-item">
            <el-input
                v-model="selectByForm.name"
                placeholder="请输入资产名称"
                clearable
                class="form-input"
                @focus="handleFocus($event)"
                @blur="handleBlur($event)"
            >
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="form-col">
          <el-form-item label="类型" class="form-item">
            <el-select
                v-model="selectByForm.assetType"
                placeholder="请选择资产类型"
                clearable
                style="width: 100%"
            >
              <el-option label="机械" value="machinery" />
              <el-option label="养殖设施" value="breeding_facility" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="form-col">
          <el-form-item label="状态" class="form-item">
            <el-select
                v-model="selectByForm.isAvailable"
                placeholder="请选择状态"
                clearable
                style="width: 100%"
            >
              <el-option label="忙碌" value="0" />
              <el-option label="空闲" value="1" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 操作按钮（单独一行） -->
      <el-row>
        <el-col :span="24" class="form-actions">
          <el-button type="primary" @click="onSelect" icon="el-icon-search">查询</el-button>
        </el-col>
      </el-row>
    </el-form>

    <!--  列表页  -->
    <el-table :data="tableData"
              style="width: 100%"
              :header-cell-style="{background: '#f5f7fa', color: '#606266'}"
              stripe
              highlight-current-row
              @current-change="toShow"
              border
    >
      <el-table-column prop="ownerName" label="提供者" width="180" align="center"  ></el-table-column>
      <el-table-column prop="name" label="名称" width="180" align="center" ></el-table-column>
      <el-table-column prop="assetType" label="类型" width="180" align="center" >
        <template slot-scope="scope">
            {{ assetTypeMap[scope.row.assetType] || '未知类型' }}
        </template>
      </el-table-column>
      <el-table-column prop="maintenanceStatus" label="维护状态" width="180" align="center" >
        <template slot-scope="scope">
          {{ mainStatus[scope.row.maintenanceStatus] || '未填写' }}
        </template>
      </el-table-column>
      <el-table-column prop="isAvailable" label="状态" width="220" align="center" >
        <template slot-scope="scope">
          {{ AvailableMap[scope.row.isAvailable] || '未填写' }}
        </template>
      </el-table-column>
      <el-table-column prop="currentValue" label="当前价格" width="220" align="center" >
        <template slot-scope="scope">
          {{ scope.row.currentValue || '未填写' }}
        </template>
      </el-table-column>

    </el-table>

    <!--    页脚-->
    <el-pagination
        background
        :page-size="pageSize"
        :current-page="pageNum"
        :page-count="pages"
        layout="prev, pager, next"
        :total="total"
        @current-change="changePageNum"
    >
    </el-pagination>

    <!--  详细信息弹窗-->
    <el-dialog
        title="农业资产详情"
        :visible.sync="showDialog"
        width="800px"
        :close-on-click-modal="false"
        class="asset-detail-dialog"
    >
      <div class="detail-container">
        <el-row :gutter="30">
          <!-- 第一列 - 基本信息 -->
          <el-col :span="12">
            <div class="detail-section">
              <h4 class="section-title"><i class="el-icon-info"></i> 基本信息</h4>

              <div class="detail-row">
                <span class="detail-label">资产类型：</span>
                <span class="detail-value">{{assetTypeMap[form.assetType] || "-"}}</span>
              </div>

              <div class="detail-row">
                <span class="detail-label">资产名称：</span>
                <span class="detail-value">{{form.name || "-"}}</span>
              </div>

              <div class="detail-row">
                <span class="detail-label">购买日期：</span>
                <span class="detail-value">{{form.purchaseDate || "-"}}</span>
              </div>

              <div class="detail-row">
                <span class="detail-label">所有者姓名：</span>
                <span class="detail-value">{{form.ownerName || "-"}}</span>
              </div>
            </div>
          </el-col>

          <!-- 第二列 - 状态信息 -->
          <el-col :span="12">
            <div class="detail-section">
              <h4 class="section-title"><i class="el-icon-setting"></i> 状态信息</h4>

              <div class="detail-row">
                <span class="detail-label">当前估值(元)：</span>
                <span class="detail-value">{{form.currentValue || "-"}}</span>
              </div>

              <div class="detail-row">
                <span class="detail-label">维护状态：</span>
                <span class="detail-value">{{mainStatus[form.maintenanceStatus] || "-"}}</span>
              </div>

              <div class="detail-row">
                <span class="detail-label">上次维护日期：</span>
                <span class="detail-value">{{form.lastMaintenanceDate || "-"}}</span>
              </div>

              <div class="detail-row">
                <span class="detail-label">下次维护日期：</span>
                <span class="detail-value">{{form.nextMaintenanceDate || "-"}}</span>
              </div>
            </div>
          </el-col>
        </el-row>

        <!-- 规格描述 -->
        <div class="detail-section">
          <h4 class="section-title"><i class="el-icon-document"></i> 规格描述</h4>
          <div class="detail-content">
            {{form.specifications || "无规格描述"}}
          </div>
        </div>

        <!-- 可用状态 -->
        <div class="detail-section">
          <h4 class="section-title"><i class="el-icon-collection"></i> 当前状态</h4>
          <div class="detail-row">
            <span class="detail-value">{{form.isAvailable === '1' ? '空闲' : '忙碌'}}</span>
          </div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="showDialog = false" size="medium">关 闭</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
  import {getAssetsPage} from "@/api/assets";

  export default {
    name: "AssetsInfoView",
    data() {
      return{
        //展示弹窗
        showDialog:false,
        //筛选表单
        selectByForm:{
          ownerName:'',
          isAvailable:'',
          name:'',
          assetType:''
        },
        //列表数据
        tableData:'',
        //页脚
        pages: 0,
        total: 1,
        pageNum: 1,
        pageSize:6,
        //类型
        assetTypeMap:{
          machinery:'机械',
          breeding_facility:'养殖设施'
        },
        //维修状态
        mainStatus:{
          normal:'正常',
          repairing:'维修中',
          scrapped:'已报废'
        },
        //可用状态
        AvailableMap:{
          1:'空闲',
          0:'忙碌'
        },
        form: {
          assetType: '',
          name: '',
          specifications: '',
          purchaseDate: '',
          ownerName: '',
          currentValue: null,
          isAvailable: '1',
          maintenanceStatus: 'normal',
          lastMaintenanceDate: '',
          nextMaintenanceDate: ''
        }

      };
    },
    methods: {
      toShow(val){
        this.showDialog = true
        this.form = val
      },

      onSelect(){
        this.pageNum = 1
        this.getPage()
      },

      //获取页面数据
      getPage(){
        getAssetsPage(this.selectByForm,this.pageNum,this.pageSize).then((res) =>{
          if(res.code == 200){
            this.tableData = res.data.list
            this.pages = res.data.pages
            this.total = res.data.total
            this.pageNum = res.data.pageNum
            this.pageSize = res.data.pageSize
          }
        })
      },
      //直接选择第几页
      changePageNum(v){
        console.log(v+'')
        this.pageNum = v
        this.getPage()
      },
    },
    created(){
      this.getPage()
    }
  }
</script>

<style scoped>
.form-actions {
  text-align: right;
  padding-top: 10px;
  border-top: 1px solid #ebeef5;
  margin-top: 10px;
}
/* 表单行样式 */
.form-row {
  margin-bottom: 15px;
}

/* 表单列样式 */
.form-col {
  margin-bottom: 10px;
  padding: 0 10px;
}

/* 表单项样式 */
.form-item {
  margin-bottom: 0;
}

/* 输入框样式 */
.form-input {
  width: 100%;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .form-col {
    padding: 0 5px;
  }
}
/* 弹窗整体样式 */
.asset-detail-dialog {
  border-radius: 8px;
}

/* 详情容器 */
.detail-container {
  padding: 0 20px;
}

/* 详情区块样式 */
.detail-section {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f9fafc;
  border-radius: 6px;
  border-left: 4px solid #409EFF;
}

/* 区块标题样式 */
.section-title {
  margin: 0 0 15px 0;
  color: #409EFF;
  font-size: 16px;
  font-weight: 500;
}

.section-title i {
  margin-right: 8px;
}

/* 详情行样式 */
.detail-row {
  display: flex;
  padding: 8px 0;
  border-bottom: 1px solid #eaeaea;
}

.detail-label {
  width: 100px;
  color: #909399;
  font-weight: 500;
}

.detail-value {
  flex: 1;
  color: #606266;
}

/* 详情内容样式 */
.detail-content {
  padding: 10px;
  border: 1px solid #eaeaea;
  border-radius: 4px;
  background-color: #f5f7fa;
  min-height: 80px;
  color: #606266;
  white-space: pre-wrap;
}

/* 按钮区域样式 */
.dialog-footer {
  text-align: center;
  padding: 15px 20px;
  border-top: 1px solid #ebeef5;
}
</style>

